<template>
  <div class="test-type">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="题干" prop="title">
        <ExamUEditor :defaultMsg="form.title" ref="UEditorTitle" />
      </el-form-item>
      <!-- 单选题 -->
      <div v-if="type == 1">
        <el-form-item label="答案设置">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddOption()"
            icon="el-icon-plus"
            >增加选项</el-button
          >
          <span class="txt-select txt-explain"
            >点击按钮增加新的选项，并选择其中1个做为答案</span
          >
          <el-radio-group v-model="form.subAnswer">
            <el-row :gutter="20" v-if="form.subjectOptionsVOList.length">
              <el-col :span="12" v-for="(v, i) in optionCount" :key="v">
                <div
                  :class="[
                    'select-item',
                    { active: letter[i] == form.subAnswer },
                  ]"
                >
                  <div class="select-item-top">
                    <span
                      class="icon-close el-icon-circle-close"
                      @click="handleMinusOption()"
                      v-if="i >= 2 && i == optionCount - 1"
                    ></span>
                    <el-radio :label="letter[i]">选项{{ letter[i] }}</el-radio>
                  </div>
                  <ExamUEditor
                    :defaultMsg="form.subjectOptionsVOList[i].contents"
                    :ueWidth="320"
                    :ref="'UEditorRadio' + i"
                  />
                </div>
              </el-col>
            </el-row>
          </el-radio-group>
        </el-form-item>
      </div>
      <!-- 多选题 -->
      <div v-if="type == 2">
        <el-form-item label="答案设置">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddOption()"
            icon="el-icon-plus"
            >增加选项</el-button
          >
          <span class="txt-select txt-explain"
            >点击按钮增加新的选项，并选中对应选项做为答案</span
          >

          <el-checkbox-group v-model="checkedBoxs">
            <el-row :gutter="20" v-if="form.subjectOptionsVOList.length">
              <el-col :span="12" v-for="(v, i) in optionCount" :key="v">
                <div
                  :class="[
                    'select-item',
                    { active: checkedBoxs.indexOf(letter[i]) != -1 },
                  ]"
                >
                  <span
                    class="icon-close el-icon-circle-close"
                    @click="handleMinusOption()"
                    v-if="i >= 2 && i == optionCount - 1"
                  ></span>
                  <el-checkbox :label="letter[i]"
                    >选项{{ letter[i] }}</el-checkbox
                  >
                  <ExamUEditor
                    :defaultMsg="form.subjectOptionsVOList[i].contents"
                    :ueWidth="320"
                    :ref="'UEditorCheckbox' + i"
                  />
                </div>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <!-- 判断题 -->
      <div v-if="type == 3">
        <el-form-item label="答案设置" prop="subAnswer">
          <el-radio-group v-model="flag">
            <el-radio label="1">正确</el-radio>
            <el-radio label="2">错误</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <!-- 填空题 -->
      <div v-if="type == 4">
        <el-form-item label="答案设置">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddBlankArea()"
            icon="el-icon-plus"
            >增加空格</el-button
          >
          <el-row :gutter="20" v-if="blankAreaCount.length">
            <el-col :span="12" v-for="(v, i) in blankAreaCount" :key="v">
              <div class="select-item">
                <span
                  class="icon-close el-icon-circle-close"
                  @click="handleMinuteBlankArea(v)"
                ></span>
                <p>空格{{ v }}</p>
                <el-input v-model="blankAreaValue[i]"></el-input>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </div>
      <!-- 简答题 -->
      <div v-if="type == 5">
        <el-form-item label="参考答案" prop="shortAnswer">
          <ExamUEditor :defaultMsg="form.subAnswer" ref="UEditorSubAnswer" />
        </el-form-item>
      </div>
      <!-- 附件题 -->
      <div v-if="type == 6">
        <el-form-item label="参考答案">
          <UploadFile multiple @e-fileData="saveFile" />
          <p class="txt-explain"
            >请上传*.txt;*.doc;*.pdf;*.docx;*.zip;*.rar格式的试题参考答案附件，10M以内。</p
          >
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {
    UploadFile: () => import('@/components/uploadFile'),
  },
  data() {
    return {
      type: 1,
      flag: '1',
      letter: [],
      optionCount: 4,
      checkedBoxs: [],
      blankAreaCount: [],
      blankAreaValue: [],
      form: {
        title: '', //题干
        extFiled1: '', //试题答案
        subAnswer: '', //试题答案
        subjectOptionsVOList: [], //题目集合
      },
      rules: {
        title: [{ required: true, message: '请输入题干', trigger: 'change' }],
        subAnswer: [
          { required: true, message: '请选择试题状态', trigger: 'blur' },
        ],
        shortAnswer: [
          { required: true, message: '请输入答案', trigger: 'change' },
        ],
      },
    }
  },
  props: ['initForm'],
  watch: {
    'initForm.type': {
      handler(type) {
        this.type = type
        this.flag = '1'
        this.optionCount = 4
        this.blankAreaCount = []
        this.blankAreaValue = []
        this.checkedBoxs = []
        this.form.title = ''
        this.form.subAnswer = ''
        this.form.extFiled1 = ''
        this.setOption()
      },
    },
  },
  mounted() {
    this.letter = this.setDesc()
    this.setOption()
    this.init(this.initForm)
  },
  methods: {
    init(row) {
      this.type = row.type
      this.flag = '1'
      this.optionCount = 4
      this.blankAreaCount = []
      this.blankAreaValue = []
      this.checkedBoxs = []
      if (!row.hasOwnProperty('id')) return
      if (this.type == 1) {
        //单选题
        this.optionCount = row.subjectOptionsVOList.length
        this.form.subjectOptionsVOList = row.subjectOptionsVOList
      } else if (this.type == 2) {
        //多选题
        this.checkedBoxs = JSON.parse(row.subAnswer)
        this.optionCount = row.subjectOptionsVOList.length
        this.form.subjectOptionsVOList = row.subjectOptionsVOList
      } else if (this.type == 3) {
        //判断题
        this.flag = row.subAnswer
      } else if (this.type == 4) {
        //填空题
        let answer = JSON.parse(row.subAnswer)
        this.blankAreaCount = answer.map((v) => v.key)
        this.blankAreaValue = answer.map((v) => v.value)
      } else if (this.type == 5) {
        //问答题
      } else if (this.type == 6) {
        //附件题
        this.form.extFiled1 = row.extFiled1
      }
      this.form.title = row.title

      this.form.subAnswer = row.subAnswer
    },
    test() {
      //题干
      this.form.title = this.$refs.UEditorTitle.message
      // if (!this.form.title) {
      //   this.$message({
      //     message: '请输入题干',
      //     type: 'warning',
      //   })
      //   return
      // }
      //单选题
      if (this.type == 1) {
        this.form.subjectOptionsVOList.forEach((item, idx) => {
          item.contents = this.$refs['UEditorRadio' + idx][0].message
        })
      }
      //多选题
      if (this.type == 2) {
        this.form.subAnswer = JSON.stringify(this.checkedBoxs)
        this.form.subjectOptionsVOList.forEach((item, idx) => {
          item.contents = this.$refs['UEditorCheckbox' + idx][0].message
        })
      }
      //判断题
      if (this.type == 3) {
        this.form.subAnswer = this.flag
      }
      //填空题
      if (this.type == 4) {
        let arr = []
        this.blankAreaCount.forEach((v, i) => {
          let obj = {
            key: v,
            value: this.blankAreaValue[i],
          }
          arr.push(obj)
        })
        this.form.subAnswer = JSON.stringify(arr)
      }
      //简答题
      if (this.type == 5) {
        this.form.subAnswer = this.$refs.UEditorSubAnswer.message
      }
      if (this.type > 2) {
        this.form.subjectOptionsVOList = []
      }
      this.$emit('sendForm', this.form)
    },
    saveFile(v) {
      this.form.extFiled1 = v
    },
    setDesc() {
      const letterArr = []
      for (let i = 0; i < 26; i++) {
        letterArr[i] = String.fromCharCode(i + 65)
      }
      return letterArr
    },
    //设置选项
    setOption() {
      this.form.subjectOptionsVOList = []
      for (var i = 0; i < this.optionCount; i++) {
        let obj = {
          contents: '',
          tag: this.letter[i],
        }
        this.form.subjectOptionsVOList.push(obj)
      }
    },
    //新增选项
    handleAddOption() {
      if (this.optionCount >= 8) {
        this.$message({
          message: '最多添加' + this.optionCount + '条选项',
          type: 'warning',
        })
        return
      }
      let obj = {
        contents: '',
        tag: this.letter[this.optionCount],
      }
      this.optionCount++
      this.form.subjectOptionsVOList.push(obj)
    },
    //删除选项
    handleMinusOption() {
      this.optionCount--
      this.form.subAnswer = ''
      this.form.subjectOptionsVOList.splice(this.optionCount, 1)
      let allOptions = this.form.subjectOptionsVOList.map((v) => v.tag)
      this.checkedBoxs = this.checkedBoxs.filter(
        (v) => allOptions.indexOf(v) != -1,
      )
    },
    //新增填空题空格
    handleAddBlankArea() {
      let maxNum = 1
      if (!this.blankAreaCount.length) {
        maxNum = 1
      } else {
        maxNum = Math.max.apply(Math, this.blankAreaCount)
        maxNum++
      }
      this.blankAreaCount.push(maxNum)
      let text = '[空格' + maxNum + ']'
      this.$refs.UEditorTitle.insertContentHandle(text)
    },
    //删除填空题空格
    handleMinuteBlankArea(v) {
      let idx = this.blankAreaCount.indexOf(v)
      this.blankAreaCount.splice(idx, 1)
      this.blankAreaValue.splice(idx, 1)
      let text = '[空格' + v + ']'
      this.$refs.UEditorTitle.deleteContentHandle(text)
    },
  },
}
</script>
<style scoped lang="scss">
.select-item {
  position: relative;
  background: #f5f5f5;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  &.active {
    background: #fdf6b9;
  }
  .select-item-top {
    margin-bottom: 10px;
  }
  .el-input {
    margin: 10px 0;
  }
  .icon-close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    color: #aaa;
    font-size: 20px;
    &:hover {
      color: var(--colorH1);
    }
  }
}
.txt-select {
  margin-left: 10px;
}
</style>